//封装柱状图组件
//1.把部分代码都放到这个组件中
//2.把可变的部分抽象成prop参数
//
import * as echarts from "echarts";
import { useEffect, useRef } from "react";

const BarChart = ({title}) => {
  const chartRef = useRef(null);
  useEffect(() => {
    //保证dom节点可用 挂载
    const chartDom = chartRef.current;
    const myChart = echarts.init(chartDom); //初始化生成实例对象

    //准备图表参数
    const option = {
      title: {
        text: title,
      },
      xAxis: {
        type: "category",
        data: ["vue", "react", "Angular"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [10, 40, 70],
          type: "bar",
        },
      ],
    };
    //使用图表参数完成图表的渲染
    option && myChart.setOption(option);
  }, []);
  return <div ref={chartRef} style={{ width: "500px", height: "400px" }}></div>;
};
export default BarChart;
